<!--
 * @Author: 无处安放的六月
 * @Date: 2023-11-27 11:20:01
 * @LastEditors: 无处安放的六月
 * @LastEditTime: 2023-12-05 14:08:01
 * @FilePath: \WEB\src\components\LeftTree\index.vue
 * @Description:
-->
<template>
  <el-col id="left-tree" class="left-tree" :offset="0" :span="6" :style="{width:width}">
    <div>
      <div class="box-title">分类目录</div>
      <el-input v-model="filterText" placeholder="请输入关键词" prefix-icon="el-icon-search" />
      <el-tree ref="tree" :data="data" :props="defaultProps" :default-expanded-keys="defaultExpandKeys" :empty-text="emptyText" :show-checkbox="showCheckbox" :highlight-current="true" :filter-node-method="filterNode" :node-key="nodeKey" :expand-on-click-node="false" :default-expand-all="defalutExpandAll" @node-click="handleNodeClick" />
    </div>
    <div id="resize" class="resize" title="收缩侧边栏">⋮</div>
  </el-col>
</template>
<script>
import pinyin from 'pinyin'
export default {
  name: 'LeftTree',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      }
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    emptyText: {
      type: String,
      default: ''
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: 'children',
          label: 'label'
        }
      }
    },
    defaultExpandKeys: {
      type: Array,
      default: () => {
        return [-1]
      }
    },
    defalutExpandAll: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    showFilter: {
      type: Boolean,
      default: false
    },
    searchKey: {
      type: String,
      default: 'name'
    },
    nodeKey: {
      type: String,
      default: 'id'
    },
    width: {
      type: String,
      default: '200px'
    }
  },
  data() {
    return {
      filterText: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  mounted() {
    this.dragControllerDiv()
  },
  methods: {
    dragControllerDiv() {
      console.log(this.disabled)
      const left = document.getElementById('left-tree')
      const line = document.getElementById('resize')
      const right = document.getElementById('right-content')
      // 鼠标按下事件
      line.onmousedown = (e) => {
        const startX = e.clientX
        line.left = line.offsetLeft
        // 鼠标拖动事件
        document.onmousemove = (e) => {
          const moveLen = line.left + (e.clientX - startX)
          if (
            moveLen >= document.body.clientWidth * 0.1 &&
            moveLen <= document.body.clientWidth * 0.4
          ) {
            line.style.left = moveLen + 'px'
            left.style.width = moveLen + 'px'
            right.style.width = document.body.clientWidth - moveLen + 'px'
          }
        }
        document.onmouseup = () => {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    },
    filterNode(value, data) {
      if (!value) return true
      const pinyinStr = pinyin(data[this.searchKey], {
        style: pinyin.STYLE_NORMAL
      })
        .toString()
        .replace(/,/g, '')
      return (
        data[this.searchKey].indexOf(value.toUpperCase().toLowerCase()) !==
          -1 || pinyinStr.indexOf(value.toUpperCase().toLowerCase()) !== -1
      )
    },
    handleNodeClick(data, node) {
      this.$emit('handleNodeClick', data)
      this.$emit('handleNodeClickAll', { data, node })
    }
  }
}
</script>
<style lang='scss' scoped>
.title {
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  font-size: 14px;
  color: #666;
  text-indent: 1em;
  background: #f5f5f5;
  position: relative;
  top: -10px;
  left: -10px;
  width: calc(100% + 10px);
  border-radius: 10px 10px 0 0;
}
.el-input {
  width: calc(100% - 10px);
  margin: 10px 0;
}
.el-tree {
  overflow: auto;
  height: calc(100vh - 240px);
  margin-right: 5px;
}
</style>
